<template>
	<div class="leave">
		<div class="liveReservation_h clear">
			<router-link :to="{path: '/class/leave/index', query: {id: path}}">请假申请</router-link>
			<router-link :to="{path: '/class/leave/auth',query: {id: path}}">请假审批</router-link>
		</div>
		<!--  -->
		<div class="Invite_sl clear">
			<!--  -->
			<div class="myLive_ch fl">
				<label>
					<input type="radio" name="check" checked>
					<span @click="changeCount(-1)">全部（<i>{{all}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(1)">已通过（<i>{{normal}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(2)">未审批（<i>{{unapproved}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(3)">已拒绝（<i>{{refused}}</i>）</span>
				</label>
				<label>
					<input type="radio" name="check">
					<span @click="changeCount(4)">已撤销（<i>{{revoke}}</i>）</span>
				</label>
			</div>
		</div>
		<!--  -->
		<div class="myLive_" v-loading="loading">
			<ul class="clear">
				<li class="leave_ls fl" v-for="(item, index) in leaveList">
					<router-link class="leave_ls1" :to="{path: '/class/leave/detail', query: {id: item.id}}">{{item.name}}的请假申请</router-link>
			<!-- 		<div class="leave_ls2" v-if="item.leave_style == 0">请假类型：事假</div>
					<div class="leave_ls2" v-if="item.leave_style == 1">请假类型：病假</div>
					<div class="leave_ls2" v-if="item.leave_style == 2">请假类型：婚假</div>
					<div class="leave_ls2" v-if="item.leave_style == 3">请假类型：丧假</div>
					<div class="leave_ls2" v-if="item.leave_style == 4">请假类型：其他</div> -->
					<div class="leave_ls2">请假类型：{{['事假', '病假', '婚假', '丧假', '其他'][+item.leave_style]}}</div>
					<div class="leave_ls3">
						<p>
							起止时间： {{item.start_time.substring(0,16)}}
						</p>
						<p>
							截止时间： {{item.end_time.substring(0,16)}}
						</p>
					</div>
					<div class="leave_ls4 clear">
						<span>发起时间： {{item.create_time.substring(0,16)}}</span>
					</div>
					<div class="leave_ls5 approved" v-if="item.status == 1">
						<i class="ipm qingjia_icon01"></i>
						<p>已批准</p>
					</div>
					<div class="leave_ls5 refuse" v-if="item.status == 3">
						<i class="ipm qingjia_icon02"></i>
						<p>拒绝</p>
					</div>
					<div class="leave_ls5 rescinded" v-if="item.status == 4">
						<i class="ipm qingjia_icon02"></i>
						<p>已撤销</p>
					</div>
					<div class="leave_ls6" v-if="item.status == 2">
						<el-button type="primary" @click="getApproval(item.id)">批准</el-button>
						<el-button type="primary" plain @click='getRefuse(item.id)'>拒绝</el-button>
					</div>
				</li>
				<!--  -->
			</ul>
		</div>
		<!--  -->
		<div class="pageBox" v-if="total_number > page_size">
			<el-pagination @current-change="change_page" :page-size="page_size" :current-page="page_index" layout="prev, pager, next" :total="total_number">
			</el-pagination>
		</div>
		<!--  -->
		<div class="dependent" v-if="placeholder">
			<i class="ipm image_nofound"></i>
			<p>
				还没发现任何相关的内容哦~
			</p>
		</div>
		<!-- 理由 -->
		<el-dialog title="理由" :visible.sync="reasonCause" width="520px" custom-class="reasonCause" :close-on-click-modal="false">
			<div class="Approval_TXT">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label-width="0" prop="desc">
						<el-input type="textarea" :rows="4" maxlength="200" placeholder="请填写拒绝理由, 不超200个字符" v-model="ruleForm.desc"></el-input>
					</el-form-item>
					<el-form-item class="buttonCSS" label-width="0">
						<el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
						<el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>
<script>
// import menuLink from './menuLink.vue'
export default {
	name: '',
	data() {
		return {
			leaveList: [],
			page_size: this.$g.page_size,
			page_index: 1,
			total_number: 0,
			all: 0,
			normal: 0,
			unapproved: 0,
			refused: 0,
			revoke: 0,
			Qstate: -1,
			leave_id: '',
			reasonCause: false, //理由--原因
			ruleForm: {
				desc: ''
			},
			rules: {
				desc: [
					{ required: true, message: '请填写拒绝理由', trigger: 'blur' }
				]
			},
			placeholder: false,
			loading: true,
			path: this.$route.query.id
		}
	},
	created() {
		this.getLeaveList2()
	},
	watch: {
		'changData'(val, newval) {
			this.path = sessionStorage.getItem('classId')
			this.getLeaveList2()
		}
	},
	computed: {
		changData() {
			return deep_clone(this.$store.state.changData);
		},
	},
	methods: {
		getLeaveList2() {
			let success = (res => {
				let data = res.data;
				this.leaveList = data.data;
				this.page_index = parseInt(data.page_index);
				this.total_number = data.data_sum;

				let datacount = res.data.style_count;
				this.all = datacount.all
				this.normal = datacount.normal
				this.unapproved = datacount.unapproved
				this.refused = datacount.refused
				this.revoke = datacount.revoke

				this.loading = false
				this.leaveList.length === 0 ?
					this.placeholder = true :
					this.placeholder = false
			});
			this.$ajax({
				url: 'api/leave/leave_list',
				method: 'get',
				params: {
					data_type: -1,
					approve_id: this.$g.user_id,
					// userid: this.$g.user_id,
					page_index: this.page_index,
					page_size: this.page_size,
					leave_type: this.Qstate,
				},
				func: {
					success: success
				}
			})
		},
		//分页
		change_page(val) {
			this.page_index = val;
			this.getLeaveList2()
		},
		////筛选状态
		changeCount(stare) {
			this.Qstate = stare;
			this.getLeaveList2()
		},
		//批准
		getApproval(res_id) {
			this.$confirm('确认要批准申请吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				customClass: 'confirm-them',
			}).then(() => {
				let success = (res => {

					this.getLeaveList2()
				});
				this.$ajax({
					url: 'api/leave/leave',
					method: 'put',
					data: {
						status: 1,
						leaveid: res_id
					},
					func: {
						success: success
					}
				})
			}).catch(() => {});
		},
		//
		getRefuse(red_id) {
			this.leave_id = red_id
			this.reasonCause = true
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let success = (res => {
						this.$message.success(res.msg);
						this.reasonCause = false
						this.getLeaveList2()
						this.ruleForm.desc = ''
					});
					this.$ajax({
						url: 'api/leave/leave',
						method: 'put',
						data: {
							leaveid: this.leave_id,
							reason_content: this.ruleForm.desc,
							status: 3
						},
						func: {
							success: success
						}
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		resetForm(formName) {
			this.reasonCause = false
		},
	}
}
</script>